<template>
	<uni-popup ref="popup" type="bottom">
		<view class="filter-modal">
			<view class="header">
				<text>筛选订单</text>
				<uni-icons type="closeempty" size="20" @click="close" />
			</view>
			<scroll-view scroll-y class="content">
				<view class="field">
					<text>平台</text>
					<picker @change="onPlatformChange" :value="form.platform" :range="platforms" range-key="label">
						<uni-tag>{{ platforms[form.platform]?.label || '全部' }}</uni-tag>
					</picker>
				</view>
				<view class="field">
					<text>状态</text>
					<picker @change="onStatusChange" :value="form.status" :range="statuses" range-key="label">
						<uni-tag>{{ statuses[form.status]?.label || '全部' }}</uni-tag>
					</picker>
				</view>
			</scroll-view>
			<view class="footer">
				<button @click="reset">重置</button>
				<button type="primary" @click="submit">确定</button>
			</view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const popup = ref();
const form = ref({ platform: 0, status: 0 });

const platforms = [{ label: '全部' }, { label: '淘宝' }, { label: '天猫' }, { label: '京东' }];
const statuses = [{ label: '全部' }, { label: '待付款' }, { label: '已发货' }, { label: '已完成' }, { label: '已取消' }];

const open = (data: any) => {
	Object.assign(form.value, data);
	popup.value?.open();
};

const close = () => popup.value?.close();

const onPlatformChange = (e: any) => (form.value.platform = e.detail.value);
const onStatusChange = (e: any) => (form.value.status = e.detail.value);

const reset = () => (form.value = { platform: 0, status: 0 });

const submit = () => {
	const result = {
		platform: form.value.platform ? platforms[form.value.platform].label : '',
		status: form.value.status ? statuses[form.value.status].label : ''
	};
	emit('submit', result);
	close();
};

defineExpose({ open });
defineEmits(['submit']);
</script>

<style scoped>
.filter-modal {
	background: #fff;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	overflow: hidden;
}
.header {
	display: flex;
	justify-content: space-between;
	padding: 30rpx 30rpx 20rpx;
	font-size: 32rpx;
	border-bottom: 1rpx solid #eee;
}
.content {
	max-height: 60vh;
	padding: 30rpx;
}
.field {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}
.footer {
	display: flex;
	padding: 20rpx 30rpx;
	border-top: 1rpx solid #eee;
	gap: 20rpx;
}
</style>
